<!doctype html>
<html lang="en">
<head>
	<!--time: 2018年11月23日 17:33:16-->
	<!--author: dbag-->
	<!--blog: http://www.cnblogs.com/phper8/-->
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Transfer 穿梭框组件-基于layui</title>
	<link rel="stylesheet" href="layui/layui/css/layui.css">
</head>
<body>
    <div class="layui-container" style="margin-top: 15px;">
        <div class="layui-btn-group">
            <button class="layui-btn all">获取全部数据</button>
            <button class="layui-btn left">获取左边数据</button>
            <button class="layui-btn right">获取右边数据</button>
        </div>
        <span>问题反馈QQ群: 925487043</span>
        <div id="root"></div>
        <div id="root1"></div>
    </div>
</body>
<script type="text/javascript" src="layui/layui/layui.js"></script>
<script>
layui.config({
  base: 'layui_exts/transfer/'
}).use(['transfer'],function () {
    var transfer = layui.transfer,$ = layui.$;
    //数据源
    var data1 = [{'id':'10001','name':'杜甫','sex':'男'},{'id':'10002','name':'李白','sex':'男'},{'id':'10003','name':'王勃','sex':'男'},{'id':'10004','name':'李清照','sex':'男'}];
    var data2 = [{'id':'10005','name':'白居易','sex':'男'}];
    //表格列
    var cols = [{type: 'checkbox', fixed: 'left'},{field: 'id', title: 'ID', width: 80, sort: true},{field: 'name', title: '用户名'},{field: 'sex', title: '性别'}]
    //表格配置文件
    var tabConfig = {'page':true,'limits':[10,50,100],'height':400}

    var tb1 = transfer.render({
        elem: "#root", //指定元素
        cols: cols, //表格列  支持layui数据表格所有配置
        data: [data1,data2], //[左表数据,右表数据[非必填]]
        tabConfig: tabConfig //表格配置项 支持layui数据表格所有配置
    })

    //transfer.get(参数1:初始化返回值,参数2:获取数据[all,left,right,l,r],参数:指定数据字段)
    //获取数据
    $('.all').on('click',function () {
        var data = transfer.get(tb1,'all');
        layer.msg(JSON.stringify(data))
    });
    $('.left').on('click',function () {
        var data = transfer.get(tb1,'left','id');
        layer.msg(JSON.stringify(data))
    });
    $('.right').on('click',function () {
        var data = transfer.get(tb1,'r');
        layer.msg(JSON.stringify(data))
    });
})
</script>
<script>
    //以下百度统计代码与组件代码无关 请勿使用
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?74fccec1ffa027e00b82ec47a5b9f8f5";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</html>